import store from "../../store"
import { useState } from "react"
const Chatlog = () => {
    //声明一个状态用于组件受控
    let [val, setVal] = useState("")
    //从redux解构数据
    let { chatlog } = store.getState()
    //通过redux数据创建页面解构
    let lis = chatlog.map((item, index) => {
        return <li key={index}>{item}</li>
    })
    //组件受控的处理函数
    let handleChange = (e) => {
        setVal(e.target.value)
    }
    //点击发送按钮处理函数
    let handleClick = () => {
        //通过dispatch变更redux中的chatlog数据

        store.dispatch({ type: 'ADD_CHAT', payload: val })
    }
    return (
        <fieldset>
            <legend>聊天日志</legend>
            <input type="text" value={val} onChange={handleChange} />
            <button onClick={handleClick}>点击发送</button>
            <ul>
                {lis}
            </ul>
        </fieldset>
    )
}

export default Chatlog